<template>
    <div class="Bfc" style="">
        <div class="Bfc_top">
            <img src="../../assets/btc_icon.png" alt="" style="width: 20px;height: 20px;">
            <span style="margin-left: 5px;color: #fff;font-weight: bold;">BFC</span>
            <van-icon name="arrow" color="#fff" style="margin-top: 3px;"/>
        </div>
        <div class="Bfc_items">
            <div class="Bfc_items_item">
                <span style="font-size: 12px;color: #888888;">币种权益</span>
                <span style="font-size: 14px;color: #fff;">10000</span>
                <span style="font-size: 10px;color: #888888;">$68,842.80</span>
            </div>
            <div class="Bfc_items_item" v-if="isshow" @click="embfc">
                <span style="font-size: 12px;color: #888888;">成本</span>
                <span style="font-size: 14px;color: #fff;">--🖊</span>
            </div>
            <div class="Bfc_items_item" v-else>
                <span style="font-size: 12px;color: #888888;">币种权益</span>
                <span style="font-size: 14px;color: #fff;">10000</span>
                <span style="font-size: 10px;color: #888888;">$68,842.80</span>
            </div>
            <div class="Bfc_items_item">
                <span style="font-size: 12px;color: #888888">币种权益</span>
                <span style="font-size: 14px;color: #fff;">10000</span>
      
            </div>
        </div>
        <div class="Bfc_items">
            <div class="Bfc_items_item">
                <span style="font-size: 12px;color: #888888;">币种权益</span>
                <span style="font-size: 14px;color: #fff;">10000</span>
                <span style="font-size: 10px;color: #888888;">$68,842.80</span>
            </div>
        </div>
        <div class="Footer" v-if="isshow">
            <div class="Footer-item" @click="stop">
                止盈止损
            </div>
            <div class="Footer-item" @click="Gmai">
                买卖
            </div>
        </div>
    </div>
  </template>
  
  <script>
  // 这里可以添加组件的逻辑代码，例如数据获取和处理方法
  export default {
    name: 'BitcoinDashboard',
    props:{
        isshow:{
            default:false
        }
    },
    methods:{
        embfc(){
            this.$emit("ShowPop",true)
        },
        Gmai(){
            this.$emit("palyPop",true)
        },
        stop(){
            this.$emit("stopShow",true)
        }
    }
  }
  </script>
  
  <style scoped lang="scss">
  .Bfc{
    height: auto;

    padding-bottom: 10px;
    margin-top: 20px;
    .Bfc_top{
        height: 30px;
        display: flex;
    }
    .Bfc_items{
        height: 100px;
        display: flex;
        margin-top: 50px;
        justify-content: space-between;
        .Bfc_items_item{
            display: flex;
            flex-direction: column;

        }
    }
    .Footer{
        width: 90%;
        margin-left: 5%;
        // height: 45px;
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        .Footer-item{
            width: 45%;
            height: 60px;
            border-radius: 100px;
            text-align: center;
            line-height: 60px;
            color: #fff;
            background: #1A1A1A;
        }
    }
  }
  </style>